/**
 *  学习目标：React 路由
 *    HashRouter 组件：    hash 模式
 *    BrowserRouter 组件： history 模式
 *          类似 Vue 的  new Router()
 *          开发经验：导入 HashRouter / BrowserRouter 组件后建议通过 as 改名为 Router
 *    Route 组件：
 *          类似 Vue 的 路由配置：{ path:'xxx', component:'xxx' }
 *    Link/NavLink  组件：
 *          类似 Vue 的 <router-link> 组件
 *          注意事项：
 *            Link/NavLink 组件需要嵌套到 HashRouter / BrowserRouter 组件内
 *            NavLink 组件如果路径匹配的话，会自动添加  class="active" 的类名
 */
import React from 'react'
// BrowserRouter as Router  作用：把 BrowserRouter 组件改名为 Router
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'
import Find from './views/Find'
import My from './views/My'

export default class App extends React.Component {
  render() {
    return (
      <>
        <Router>
          <h1>仿网易云音乐路由-公共的头部</h1>
          <p>-----------------华丽分割线-----------------</p>
          <Link to='/find'>发现音乐-Link组件写法</Link>
          <p>-----------------华丽分割线-----------------</p>
          <NavLink to='/find'>发现音乐-NavLink组件写法</NavLink>
          <p>-----------------华丽分割线-----------------</p>
          <NavLink to='/my'>我的音乐-NavLink组件写法</NavLink>

          <h3>-----------------巨型分割线，下面渲染页面组件-----------------</h3>
          {/* 推荐写法：通过 component 属性绑定组件，会通过 props 传递路由相关信息给子组件，工作常用 */}
          <Route path='/find' component={Find} />
          <Route path='/my' component={My} />
        </Router>
      </>
    )
  }
}
